<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索</title>
    <link rel="stylesheet" href="/business/css/layer.css">
    <link rel="stylesheet" href="/business/css/common.min.css">
    <link rel="stylesheet" href="/business/mescroll/mescroll.min.css">
</head>
<body>
<div class="seek">
    <div class="header_ clearfix">
        <form action="" method="get">
            <input type="hidden" name="_token" value="{{csrf_token()}}">
            <div>
                <i class="seek_btn"></i>
                <input type="text" name="keyword" value="{{$products!==null?$products->keyword:''}}" placeholder="请输入要搜索的产品名称">
                <i class="clear_ none"></i>
            </div>
            <a href="{{url('/product')}}">取消</a>
        </form>
    </div>
</div>

<div class="seek mescroll" id="mescroll">
    <div>
        @if($products!==null && $products->count())
            <div class="seek_res_list">
                <p>搜索结果</p>
                <ul class="product_list_msg">
                    {{--@foreach($products as $product)
                       <li class="shadow">
                        <a href="{{url('/product/show',['id'=>$product->id])}}">
                            <div class="top">
                                <div class="clearfix item_t">
                                    <div>
                                        @if(isset($product->basic_info['agent_logo']))
                                            <img src="{{env('IMG_URL').$product->basic_info['agent_logo']}}" alt="">
                                        @else
                                            <img src="/business/images/logo-1.png" alt="">
                                        @endif
                                    </div>
                                    <div>
                                        <p class="title">{{$product->name}}</p>
                                    </div>
                                    <div>
                                        <span>{{$product->apply_num}}</span>人申请
                                    </div>
                                    <p class="clearfix">
                                        @if($product->tag_ids)
                                            @foreach($product->tag_ids as $tag)
                                                <span>{{$tag['name']}}</span>
                                            @endforeach
                                        @endif
                                    </p>
                                </div>
                                <div class="clearfix loanMsg">
                                    <div>
                                        <p>{{$product->basic_info['rate_start']}}%</p>
                                        <p>最低月利率</p>
                                    </div>
                                    <div>
                                        <p>{{$product->basic_info['loan_start'].'-'.$product->basic_info['loan_end']}}</p>
                                        <p>贷款额度(万元)</p>
                                    </div>
                                    <div>
                                        <p>{{$product->basic_info['repay_start'].'-'.$product->basic_info['repay_end']}}</p>
                                        <p>期限(月)</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bot clearfix">
                                --}}{{--<i class="pass"></i>--}}{{--
                                <p>平均下款时间 : {{$product->basic_info['progress_start']}}天</p>
                                <i class="corner"></i>
                            </div>
                        </a>
                    </li>
                    @endforeach--}}
            </ul>
        </div>
        @else
            @if(\Illuminate\Support\Facades\Input::get('keyword'))
                <div class="seek_res">
                    <img class="" src="/business/images/sou-suo-wei-kong.png" alt="">
                    <p>搜索为空</p>
                </div>
            @endif
        @endif
    </div>


</div>
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/business/js/layer.mobile.js"></script>
<script src="/business/mescroll/mescroll.min.js"></script>
<script src="/business/js/base.js"></script>
<script src="/business/js/common.js"></script>
<script>

    $(function () {
        $('form').on('submit',function () {
            var keyword=$('input[name="keyword"]').val();
            if(!keyword){
                layer.open({
                    content: '请输入产品名称',
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
                return false;
            }
        })
    });

    @if($products!==null && $products->count() && $products->url(1))
        localStorage.setItem('url',"{!! $products->url(1) !!}");
        var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
            down: {
                use:false,
                auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
//                callback: downCallback //下拉刷新的回调
            },
            up: {
                auto:true,
                callback: upCallback , //上拉加载的回调
                isBounce: false, //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
                toTop:{ //配置回到顶部按钮
                    src:'/business/mescroll/img/mescroll-totop.png'
                },
                htmlNodata:'<p class="upwarp-nodata"> -- 没有更多数据了 -- </p>',
                htmlLoading:'<div style="text-align: center" "><img style="width: 100px;margin-bottom: -6%;display: inline-block" src="/business/mescroll/img/loading.gif"><p>&nbsp;&nbsp;加载中...</p></div>'
            }
        });
        mescroll.setPageSize(parseInt("{{$products->perPage()}}"));
    @endif

    /*下拉刷新的回调 */
    function downCallback(){
        mescroll.endSuccess();
        return false;
    }

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback() {
        var url=localStorage.getItem('url');
        if(!url){
            alert('数据已加载完毕');return false;
        }
        var _token=$('input[name="_token"]').val();
        $.ajax({
            url: url,
            method:'post',
            dataType:'json',
            data:{'_token':_token},
            success: function(res) {
                var curPageData=res.data.data;
                var totalPage=res.data.last_page;
                var nextPageUrl=res.data.next_page_url;
                if(nextPageUrl){
                    localStorage.setItem('url',nextPageUrl);
                }
                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                //必传参数(当前页的数据个数, 总页数)
                mescroll.endByPage(curPageData.length, totalPage);

                if(res.status===200){
                    if(res.data.next_page_url){
                        $('.more').data('url',res.data.next_page_url);
                    }else {
                        $('.more').data('url','').hide();
                    }
                    var html='';
                    if(res.data.data.length>0){
                        $(res.data.data).each(function (key,obj) {
                            var tagHtml='';
                            if(obj.tag_ids){

                                if(obj.tag_ids.length>0){
                                    $(obj.tag_ids).each(function (key2,tag) {
                                        if(key2>1){
                                            return false;
                                        }
                                        tagHtml +='<span>'+tag.name+'</span>';

                                    });
                                }
                            }

                            var agent_logo='/business/images/logo-1.png';
                            if(obj.basic_info.agent_logo){
                                agent_logo='{{env('IMG_URL')}}'+obj.basic_info.agent_logo;
                            }
                            html +='          <li class="shadow">\n' +
                                '            <a href="/product/show/'+obj.id+'">\n' +
                                '            <div class="top">\n' +
                                '              <div class="clearfix item_t">\n' +
                                '                <div>\n' +
                                '                  <img src="'+agent_logo+'" alt="">\n' +
                                '                </div>\n' +
                                '                <div>\n' +
                                '                  <p class="title">'+obj.name+'</p>\n' +
                                '                  <p class="clearfix">\n' +tagHtml+
                                '                  </p>\n' +
                                '                </div>\n' +
                                '                <div>\n' +
                                '                  <span>'+obj.apply_num+'</span>人申请\n' +
                                '                </div>\n' +
                                '              </div>\n' +
                                '              <div class="clearfix loanMsg">\n' +
                                '                <div>\n' +
                                '                  <p>'+obj.basic_info.rate_start+'%</p>\n' +
                                '                  <p>最低月利率</p>\n' +
                                '                </div>\n' +
                                '                <div>\n' +
                                '                  <p>'+obj.basic_info.loan_start+'-'+obj.basic_info.loan_end+'</p>\n' +
                                '                  <p>贷款额度(万元)</p>\n' +
                                '                </div>\n' +
                                '                <div>\n' +
                                '                  <p>'+obj.basic_info.repay_start+'-'+obj.basic_info.repay_end+'</p>\n' +
                                '                  <p>期限(月)</p>\n' +
                                '                </div>\n' +
                                '              </div>\n' +
                                '            </div>\n' +
                                '            <div class="bot clearfix">\n' +
                                '              <p>平均下款时间 : '+obj.basic_info.progress_start+'天</p><i class="corner"></i>\n' +
                                '            </div>\n' +
                                '          </a>\n' +
                                '          </li>\n';
                        })
                    }
                    $('.product_list_msg').append(html);
                }else {
                    alert(res.msg);return false;
                }

                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
                //列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)

                //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                //必传参数(当前页的数据个数, 总页数)
                //mescroll.endByPage(curPageData.length, totalPage);

                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                //必传参数(当前页的数据个数, 总数据量)
                //mescroll.endBySize(curPageData.length, totalSize);

                //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                //必传参数(当前页的数据个数, 是否有下一页true/false)
                //mescroll.endSuccess(curPageData.length, hasNext);

                //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
                //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
                //如果传了hasNext,则翻到第二页即可显示无更多数据.
                //mescroll.endSuccess(curPageData.length);

                //设置列表数据
                //setListData(curPageData);//自行实现 TODO
            },
            error: function(e) {
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                mescroll.endErr();
            }
        });
    }


</script>
</body>
</html>